<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侵权赔偿案例 - 个人数据侵权损害赔偿智能预测系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        .data-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .main-content {
            padding: 20px;
            background: #f8f9fc;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 主要内容区 -->
            <div class="main-content">
                <!-- 顶部图表区域 -->
                <div class="row mb-4">
                    <div class="col-md-4">
                        <div class="data-card">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h5>同类侵权案例 (5089)</h5>
                            </div>
                            <div id="similarCases" style="height: 200px;"></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="data-card">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h5>案例平均赔偿额 (7819)</h5>
                            </div>
                            <div id="averageCompensation" style="height: 200px;"></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="data-card">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h5>案例热度指数 (85)</h5>
                            </div>
                            <div id="caseHeatIndex" style="height: 200px;"></div>
                        </div>
                    </div>
                </div>

                <!-- 搜索区域 -->
                <div class="data-card mb-4">
                    <div class="row g-3">
                        <div class="col-md-2">
                            <input type="text" class="form-control" placeholder="案件ID">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" placeholder="侵权行为描述">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" placeholder="侵权发生时间">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" placeholder="受害者人数">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" placeholder="已赔金额">
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-primary me-2">查询</button>
                            <button class="btn btn-success">新增</button>
                        </div>
                    </div>
                </div>

                <!-- 表格区域 -->
                <div class="data-card">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>案件ID</th>
                                    <th>侵权行为描述</th>
                                    <th>侵权发生时间</th>
                                    <th>受害者人数</th>
                                    <th>已赔金额</th>
                                    <th>预估赔偿金额</th>
                                    <th>案件进展</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>AJ2025963</td>
                                    <td>某社交软件侵犯用户个人隐私数据并用于第三方广告...</td>
                                    <td>2025/8/7</td>
                                    <td>800</td>
                                    <td>0元</td>
                                    <td>120000元</td>
                                    <td>处理中</td>
                                    <td>
                                        <button class="btn btn-sm btn-primary">详情</button>
                                        <button class="btn btn-sm btn-warning">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>AJ2025962</td>
                                    <td>一家在线教育平台未经授权公开个人信息...</td>
                                    <td>2025/8/5</td>
                                    <td>200</td>
                                    <td>30000元</td>
                                    <td>50000元</td>
                                    <td>已完成</td>
                                    <td>
                                        <button class="btn btn-sm btn-primary">详情</button>
                                        <button class="btn btn-sm btn-warning">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>AJ2025961</td>
                                    <td>智能家电企业未经授权收集用户隐私数据并泄露给第三方平台</td>
                                    <td>2025/8/3</td>
                                    <td>500</td>
                                    <td>50000元</td>
                                    <td>80000元</td>
                                    <td>处理中</td>
                                    <td>
                                        <button class="btn btn-sm btn-primary">详情</button>
                                        <button class="btn btn-sm btn-warning">编辑</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <div>共 3 条</div>
                        <nav>
                            <ul class="pagination mb-0">
                                <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                                <li class="page-item">
                                    <select class="form-select">
                                        <option>5条/页</option>
                                    </select>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function initCharts() {
            // 同类侵权案例散点图
            const similarCasesChart = echarts.init(document.getElementById('similarCases'));
            similarCasesChart.setOption({
                xAxis: {show: false},
                yAxis: {show: false},
                series: [{
                    type: 'scatter',
                    data: Array.from({length: 20}, () => [
                        Math.random() * 100,
                        Math.random() * 100,
                        Math.random() * 50
                    ]),
                    symbolSize: function (data) {
                        return data[2];
                    }
                }]
            });

            // 案例平均赔偿额K线图
            const compensationChart = echarts.init(document.getElementById('averageCompensation'));
            compensationChart.setOption({
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    type: 'candlestick',
                    data: [
                        [20, 34, 10, 38],
                        [40, 35, 30, 50],
                        [31, 38, 33, 44],
                        [38, 15, 5, 42]
                    ]
                }]
            });

            // 案例热度指数柱状图
            const heatIndexChart = echarts.init(document.getElementById('caseHeatIndex'));
            heatIndexChart.setOption({
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [65, 72, 85, 68, 75, 80],
                    type: 'bar',
                    color: '#4e73df'
                }]
            });
        }

        // 页面加载完成后初始化图表
        window.onload = function() {
            initCharts();
        };
    </script>
</body>
</html>